<template>
  <div>
    <!-- 1、面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2、卡片区域 -->
    <el-card>
      <!-- 警告文字区域 -->
      <el-alert
          icon="warning"
          title="注意：只允许为第三级分类设置相关参数！"
          type="warning"
          :closable="false"
          show-icon>
      </el-alert>
      <!-- 商品分类级联选择框 -->
      <el-row>
        <span>选择商品分类：</span>
        <el-cascader
          style="width:250px"
          v-model="selectedCateKeys"
          expand-trigger="hover"
          :options="CateList"
          :props="{label:'cat_name',value:'cat_id',children:'children'}"
          clearable
          placeholder='可选择'
          @change="selectedChage"
          >
            <!-- 通过scoped slot对级联选择器的备选项的节点内容进行自定义，
              scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。 -->
            <template slot-scope="{ node, data }">
              <span>{{ data.cat_name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
        
      </el-row>
      <!-- Tabs标签页区域 -->
      <!-- 双向绑定标签页的激活的一栏：值为name属性的值 -->
      <el-tabs v-model="activeName" @tab-click="tabsChange">

        <!-- 1.0 添加动态参数的面板 -->
        <el-tab-pane label="动态参数" name="many">
          <!-- 1.1 添加按钮 -->
          <el-button type="primary" size="mini" 
            :disabled="selectedCateKeys.length!==3" 
            @click="addParamsDialogIsVisible=true">添加参数</el-button>
          <!-- 1.2 表格 -->
          <el-table border :data="ManyParamsList">
            <el-table-column type="expand"></el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit"
                    @click="UpdateParamsDiagle(scope.row)" size="small"
                    >修改</el-button>
                <el-button type="danger" icon="el-icon-delete"
                    @click="deleteParams(scope.row)" size="small"
                    >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 2.0 添加静态属性的面板 -->
        <el-tab-pane label="静态属性" name="only">
          <!-- 1.1 添加按钮 -->
          <el-button type="primary" size="mini"
            :disabled="selectedCateKeys.length!==3" 
            @click="addParamsDialogIsVisible=true">添加属性</el-button>
          <!-- 1.2 表格 -->
          <el-table border :data="OnlyParamsList">
            <el-table-column type="expand"></el-table-column>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit"
                    @click="UpdateParamsDiagle(scope.row)" size="small"
                    >修改</el-button>
                <el-button type="danger" icon="el-icon-delete"
                    @click="deleteParams(scope.row)" size="small"
                    >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 3.0 对话框 -->
    <!-- 1、添加参数共用一个对话框 -->
    <el-dialog
      :title="'添加'+ParamsActiveName+':'"
      :visible.sync="addParamsDialogIsVisible"
      width="500px"
      @close="() => {ParamsObj.attr_name='';ParamsObj.attr_sel='';}"
    >
      <!-- 监听对话框关闭事件--关闭时触发close的事件函数： 重置表单数据 -->
      <!-- 表单 -->
      <el-form
        :model="ParamsObj"
        :rules="ParamsFormRules"
        ref="addParamsFromRef"
      >
        <el-form-item :label="ParamsActiveName+':'" label-width="100px" prop='attr_name'>
          <el-input v-model="ParamsObj.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer">
        <el-button @click="addParamsDialogIsVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPrams">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 2、修改参数共用一个对话框 -->
    <el-dialog
      :title="'修改'+ParamsActiveName+':'"
      :visible.sync="updateParamsDialogIsVisible"
      width="500px"
      @close="() => {ParamsObj.attr_name='';ParamsObj.attr_sel='';}"
    >
      <!-- 监听对话框关闭事件--关闭时触发close的事件函数： 重置表单数据 -->
      <!-- 表单 -->
      <el-form
        :model="ParamsObj"
        :rules="ParamsFormRules"
      >
        <el-form-item :label="ParamsActiveName+':'" label-width="100px" prop='attr_name'>
          <el-input v-model="ParamsObj.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer">
        <el-button @click="updateParamsDialogIsVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateParams">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    data(){
      return{
        // 所有商品分类数据列表
        CateList:[],
        // 级联选择器选中的双向绑定的id数组
        selectedCateKeys:[],
        // 监听导航栏的激活状态，默认选中第一个
        activeName: 'many',

        // 根据某个三级分类的id获取动态参数列表： categories/:id/attributes  动态many
        ManyParamsList:[
          // {
          //   attr_id: 3068,
          //   attr_name: "主体-商品名称",
          //   attr_sel: "only",
          //   attr_vals: "TCL电视 55A950C",
          //   attr_write: "manual",
          //   cat_id: 6,
          //   delete_time: null,
          // },
        ],
        // 静态属性列表   静态only
        OnlyParamsList:[],

        // 添加参数对话框是否显示
        addParamsDialogIsVisible:false,
        //修改餐数对话框是否显示
        updateParamsDialogIsVisible:false,

        // 添加或者修改参数的对象
        ParamsObj:{
          attr_name:'',
          attr_sel:'',
        },
        // 添加或者修改参数时的表单验证
        ParamsFormRules: {
          attr_name: [ { required: true, message: '名称不能为空', trigger: 'blur' } ]
        },
      }
    },
    methods:{
      //获取所有商品分类数据列表
      async getCateList(){
        const res = await this.$http.get('categories');
        console.log('商品分类：',res.data);
        
        if(res.data.meta.status!==200) return;
        this.CateList=res.data.data;
      },

      //监听到级联选择框选择完成时触发，限制只允许选择三级
      selectedChage(){
        if(this.selectedCateKeys.length!==3){
            // 选中存储的id数组为空
            this.selectedCateKeys=[];
            // 获取的参数对象数组重置
            this.ManyParamsList=[];
            this.OnlyParamsList=[];
            return;
        }
        console.log('选中的三级的Id:',this.selectedCateKeys[this.selectedCateKeys.length-1]);
        this.getParamsList();
      },

      //根据Id和标签页this.activeName的获取参数数据列表
      async getParamsList(){
        const res = await this.$http.get(`categories/${this.selectedCateKeys[2]}/attributes`,{params:{sel:this.activeName}});
        console.log('参数：',res.data);
        if(res.data.meta.status!==200) return;

        // 选择性保存到data数据中
        if(this.activeName=='only'){
            this.OnlyParamsList=res.data.data;
        }
        else if(this.activeName=='many'){
            this.ManyParamsList=res.data.data;
        }
      },

      // Tabs标签页，tab被选中时触发, 当我们切换标签页时，也要重新调用，获取参数数据列表
      tabsChange(){
        console.log(this.activeName);
        this.getParamsList();
      },

      // 删除参数 categories/:id/attributes/:attrid
      async deleteParams(obj){
        let result = await this.$messagebox.confirm('此操作将永久删除该参数, 是否继续?', '提示', {
            confirmButtonText: '确定',  //返回值为 confirm
            cancelButtonText: '取消',   //返回值为 cancel
            type: 'warning'
          }).catch(() => this.$message({ type: 'info', message: '已取消删除'}) );

          // 当用户点击取消时会报错，用catch捕获到错误去执行对应的事件

          //点击确定
          if(result == 'confirm'){
            const res = await this.$http.delete(`categories/${this.selectedCateKeys[2]}/attributes/${obj.attr_id}`);
            if(res.data.meta.status!==200)
                return this.$message({ type: 'error', message: '删除参数失败!'});

            this.$message({ type: 'success', message: '删除参数成功!'});
            this.getParamsList();
          }
      },

      // 添加参数
      addPrams(){
        // 拿到整个表单对象，调用其函数
        this.$refs.addParamsFromRef.validate(async valid=>{
          if(!valid) return;
          
          this.ParamsObj.attr_sel=this.activeName;
          console.log('1：',this.ParamsObj.attr_name);
          
          const res = await this.$http.post(`categories/${this.selectedCateKeys[2]}/attributes`,this.ParamsObj);

          // console.log('添加参数：',res.data);
          if(res.data.meta.status!==201) return this.$message.error('添加参数失败！');
          this.$message.success('添加参数成功！');
          this.getParamsList();
          this.addParamsDialogIsVisible=false;
        })
      },

      // 修改参数之前，先要根据id查找到参数
      async UpdateParamsDiagle(obj){
        // 打开对话框
        this.updateParamsDialogIsVisible=true;

        const res = await this.$http.get(`categories/${this.selectedCateKeys[2]}/attributes/${obj.attr_id}`,{attr_sel:this.activeName});
        console.log('根据Id查找参数:',res.data);

        if(res.data.meta.status!==200) return;

        // 找到之后，赋初值（双向绑定的）
        this.ParamsObj.attr_id=res.data.data.attr_id;
        this.ParamsObj.attr_name=res.data.data.attr_name;
        this.ParamsObj.attr_sel=res.data.data.attr_sel;
      },
      // 修改参数
      async updateParams(){
          const res = await this.$http.put(`categories/${this.selectedCateKeys[2]}/attributes/${this.ParamsObj.attr_id}`,
            {
              attr_name:this.ParamsObj.attr_name,
              attr_sel:this.ParamsObj.attr_sel,
            });
          // console.log('修改参数：',res.data);

          if(res.data.meta.status!==200)  return this.$message.error('修改参数失败！');
          this.$message.success('修改参数成功！');
          this.getParamsList();
          this.updateParamsDialogIsVisible=false;
      }

    },
    created(){
      // 获取商品分类数据列表
      this.getCateList();
    },
    computed:{
      ParamsActiveName(){
          if(this.activeName=='only')
              return '静态属性';
          return '动态参数';
      }
    }
}
</script>

<style scoped>
  .el-card {
    width: 100%;
    margin-top: 10px;
    box-shadow: 0px 0px 3px skyblue;
    background-color: #fff;
  }
  .el-row{
    margin: 10px 0px;
  }
  .el-menu{
    border-bottom-width: 4px;
  }

  /* 表格 */
  .el-table{
    margin-top: 15px;
    font-size: 13px;
  }
</style>